<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>jq</title>
	<script src="jquery-1.8.3.js"></script>
	<style type="text/css">
	body{
		margin: 0;
		padding: 0;		
	}
	header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 
	}
	nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    padding: 5px;	      
	}
	ul{
		list-style-type: none;
		padding: 0;
	}
	</style>
</head>
<body>
	<header>
		<h1>City Gallery</h1>
	</header>
	<nav>
		<ul>
			<li>AJAX</li>
			<li>AJAXCSS</li>
			<li>AJAX</li>
			<li>AJAX</li>
			<li>AJAX</li>
		</ul>
	</nav>


	<script type="text/javascript">
	
		$(function(){
			$("ul li").click(function(){
			$("ul li").css("border-bottom","");
              $(this).css("border-bottom","4px solid #ff0000");
				});
			});
	</script>

</body>
</html>